<template>
    <div class="main" v-title="'directive-首页'">
        <p v-text="formatName" @click="change"></p>
        <p v-text="num"></p>
    </div>
</template>
<script lang="ts">
// import Vue from "vue";
// import Component from "vue-class-component";
// 引入装饰器 vue-property-decorator 是对 vue-class-component 的增强
// 共有8个装饰器 @Emit @Inject Mixins @Model @Prop @Provide @Watch @Component(from vue-class-component)
import { Vue, Component } from 'vue-property-decorator'


@Component
export default class Home extends Vue {
    // data
    name:string = "Home"
    msg:string = "首页"
    num:number = 28

    // 生命周期
    mounted (){
        // 
        // let obj = Object.assign({}, {name:'abc'})
        console.log('生命周期正常引入...')
    }

    // methods
    change():void {
        console.log("change...");
    }

    // computed
    get formatName(){
        return this.name + '******format...'
    }
}
</script>


<style lang="stylus" scoped>
.main {
    font-size: 24px;
}
</style>